<template>
  <div id="business">
    <!-- 页头 -->
    <el-row class="head">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark form">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="工单编号">
                  <el-input placeholder="请输入内容" v-model="taskCode">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="工单状态">
                  <el-select v-model="status" placeholder="请选择">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.statusId"
                      :label="item.statusName"
                      :value="item.statusId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button
                  class="el-icon-search"
                  type="primary"
                  @click="onSubmit"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div></el-col
      >
    </el-row>

    <!-- main -->
    <el-row :gutter="20" class="main">
      <!-- 新增和配置按钮 -->
      <el-row :gutter="20">
        <el-button-group>
          <el-col :span="12">
            <el-button
              type="primary"
              class="prePage add-btn"
              @click.native.prevent="dialogFormVisible = true"
              ><p><i class="el-icon-circle-plus-outline"></i>新建</p></el-button
            >
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="dialogAlertVisible = true" class="add-btn"
              >工单配置</el-button
            >
          </el-col>
        </el-button-group>
      </el-row>

      <!-- 表单区域 -->
      <template>
        <el-table :data="tableData" style="width: 100%" highlight-current-row>
          <el-table-column prop="number" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="taskCode" label="工单编号" width="150">
          </el-table-column>
          <el-table-column prop="innerCode" label="设备编号" width="150">
          </el-table-column>
          <el-table-column prop="productTypeId" label="工单类型" width="120">
          </el-table-column>
          <el-table-column prop="createType" label="工单方式" width="120">
          </el-table-column>
          <el-table-column prop="taskStatus" label="工单状态" width="150">
          </el-table-column>
          <el-table-column prop="userName" label="运营人员" width="150">
          </el-table-column>

          <el-table-column prop="createTime" label="创建日期" width="200" :formatter="formatDate">
          </el-table-column>
          <el-table-column width="120" label="操作">
            <!-- :data-id="tableData[index].taskId" -->
            <template slot-scope="scope"
              ><a
                href="javascript:void(0);"
                @click="checkDetail(scope.$index, scope.row)"
                style="color:#4368e1"
                >查看详情</a
              ></template
            >
          </el-table-column>
          <template #append
            >
             <el-row class="table-foot">
            共{{ totalCount }}条记录 第 {{ currentPage }}/{{
              totalPage
            }}
            页<el-button-group class="fr">
              <el-button
                type="primary"
                class="prePage"
                ref="pageUp"
                @click="pageBack"
                :disabled="isBackDisabled"
                >上一页</el-button
              >
              <el-button
                type="primary"
                ref="pageBack"
                @click="pageUp"
                :disabled="isUpDisabled"
                >下一页</el-button
              >
            </el-button-group>
             </el-row></template
          >
        </el-table>
      </template>
    </el-row>

    <!-- 新增工单弹出框 -->
    <el-dialog title="新增工单" :visible.sync="dialogFormVisible" width="40%" :before-close="closeFn">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="设备编号"
          :label-width="formLabelWidth"
          prop="innerCode"
          :error="isError"
        >
          <el-input
            v-model="form.innerCode"
            autocomplete="off"
            style="width: 396px"
            @change="getOperatorList"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="工单类型"
          :label-width="formLabelWidth"
          prop="productTypeId"
        >
          <el-select
            v-model="form.productTypeId"
            placeholder="请选择"
            style="width: 396px"
          >
            <el-option
              v-for="item in taskTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量" :label-width="formLabelWidth">
          <template
            ><a
              href="javascript:void(0);"
              class="el-icon-edit-outline"
              @click.prevent="getTaskDetail"
              >查看详情</a
            ></template
          >
        </el-form-item>
        <el-form-item
          label="运营人员"
          :label-width="formLabelWidth"
          prop="userName"
        >
          <el-select
            v-model="form.userName"
            placeholder="请选择"
            style="width: 396px"
          >
            <el-option
              v-for="item in operatorList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="note">
          <el-input
            v-model="form.note"
            autocomplete="off"
            type="textarea"
            style="width: 396px"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center" :gutter="20" class="channelbtn">
          <el-button-group>
            <el-col :span="12">
              <el-button @click="cancelCreate">取消</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="createTask">确认</el-button>
            </el-col>
          </el-button-group>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 预警线弹框 -->
    <el-dialog title="工单配置" :visible.sync="dialogAlertVisible" width="40%">
      <el-form ref="form" :model="form" :label-width="formLabelWidth">
        <el-form-item label="补货警戒线">
          <el-input-number
            v-model="alertValue"
            controls-position="right"
            style="width: 396px"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-row type="flex" justify="center" :gutter="20">
          <el-button-group>
            <el-col :span="12">
              <el-button @click="cancel">取消</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="getTaskTypeList"
                >确认</el-button
              >
            </el-col>
          </el-button-group>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 补货调整 -->

    <el-dialog title="补货详情" :visible.sync="dialogDetailVisible">
      <el-table :data="detailData" height="300px">
        <el-table-column
          property="channelCode"
          label="货道编号"
          width="100"
        ></el-table-column>
        <el-table-column
          property="sku.brandName"
          label="商品名称"
          width="100"
        ></el-table-column>
        <el-table-column
          property="currentCapacity"
          label="当前数量"
        ></el-table-column>
        <el-table-column
          property="maxCapacity"
          label="还可添加"
        ></el-table-column>
        <el-table-column label="补满数量" width="200">
          <template slot-scope="scope">
            <el-input-number
              controls-position="right"
              v-model="num[scope.$index]"
              :min="0"
              :max="scope.row.maxCapacity"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
          <el-row type="flex" justify="center" :gutter="20" class="channelbtn">
            <el-button-group>
              <el-col :span="12">
                <el-button @click="cancel">取消</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="changeNum"
                  >确认</el-button
                >
              </el-col>
            </el-button-group>
          </el-row>
    </el-dialog>

    <!-- 工单详情--取消 -->
    <el-dialog :visible.sync="taskDetailVisible" title="工单详情" width="40%">
      <el-row type="flex" class="row-bg" justify="center" align="center">
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <i class="el-icon-warning"></i></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple"><span>取消</span></div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <img src="../../assets/canceltask.png" alt="" /></div
        ></el-col>
      </el-row>
      <el-descriptions :column="2">
        <el-descriptions-item label="设备编号">{{
          taskDetail.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          taskDetail.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="取消日期">{{
          taskDetail.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="运营人员">{{
          taskDetail.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="工单类型">{{
          taskDetail.taskType?.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="补货数量">
          <template
            ><a
              href="javascript:void(0);"
              class="el-icon-edit-outline"
              @click.prevent="getReplenishDetail"
              >查看详情</a
            ></template
          >
        </el-descriptions-item>
        <el-descriptions-item label="工单方式">{{
          taskDetail.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="取消原因">{{
          taskDetail.desc
        }}</el-descriptions-item>
      </el-descriptions>

      <el-row type="flex" justify="center" align="center">
        <el-button type="info" plain @click="recreate">重新创建</el-button>
      </el-row>
    </el-dialog>

    <!-- 补货详情 -->
    <el-dialog
      title="补货详情"
      :visible.sync="dialogReplenisDetailVisible"
      width="40%"
    >
      <el-table :data="replenishDetail">
        <el-table-column
          property="channelCode"
          label="货道编号"
          width="184"
          class="bgg"
        ></el-table-column>
        <el-table-column
          property="skuName"
          label="商品"
          width="184"
          class="bgg"
        ></el-table-column>
        <el-table-column
          property="expectCapacity"
          label="补货数量"
          width="184"
          class="bgg"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 工单详情--待办 -->
    <el-dialog :visible.sync="taskTodoVisible" title="工单详情" width="40%">
      <el-row type="flex" class="row-bg" justify="center" align="center">
        <el-col :span="4"
          ><div class="grid-content bg-purple center">
            <img src="../../assets/clock.png" alt="" /></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple"><span>待办</span></div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <img src="../../assets/todotask.png" alt="" class="absolute" /></div
        ></el-col>
      </el-row>
      <el-descriptions :column="2">
        <el-descriptions-item label="设备编号">{{
          taskDetail.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          taskDetail.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="运营人员">{{
          taskDetail.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="工单类型">{{
          taskDetail.taskType?.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="补货数量">
          <template
            ><a
              href="javascript:void(0);"
              class="el-icon-edit-outline"
              @click.prevent="getReplenishDetail"
              >查看详情</a
            ></template
          >
        </el-descriptions-item>
        <el-descriptions-item label="工单方式">{{
          taskDetail.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          taskDetail.desc
        }}</el-descriptions-item>
      </el-descriptions>

      <el-row type="flex" justify="center" align="center">
        <el-button type="info" plain @click="cancelTask">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  taskSearch,
  allTaskStatus,
  getTaskTypeList,
  getTaskInfo,
  getTaskDetails,
  cancelTask,
  createTask
} from '@/api/taskService'
import { getChannelList } from '@/api/vm'
import { getOperatorList } from '@/api/userService'
export default {
  data () {
    return {
      taskCode: '',
      taskState: '',
      tableData: [],
      totalPage: 0,
      totalCount: 0,
      currentPage: 1,
      isBackDisabled: true,
      isUpDisabled: false,
      statusOptions: [],
      status: '',
      dialogFormVisible: false,
      dialogAlertVisible: false,
      dialogDetailVisible: false,
      taskDetailVisible: false,
      dialogReplenisDetailVisible: false,
      taskTodoVisible: false,
      form: {
        innerCode: '',
        productTypeId: '',
        userName: '',
        note: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      rules: {
        innerCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        productTypeId: [
          { required: true, message: '请输入工单类型', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入运营人员', trigger: 'blur' }
        ],
        note: [{ required: true, message: '请输入运营人员', trigger: 'blur' }]
      },
      alertValue: 50,
      taskTypeList: [],
      detailData: [],
      isError: '',
      taskDetail: {},
      replenishDetail: [],
      operatorList: [
        {
          userName: '无数据',
          userId: 0
        }
      ],
      num: []
    }
  },
  async created () {
    this.getTaskList()
    const res = await allTaskStatus()
    this.statusOptions = res
    this.statusOptions.push({
      statusId: '',
      statusName: '全部'
    })
    this.getTaskTypeList()
  },
  methods: {
    // 下一页
    pageUp () {
      this.currentPage++
      this.isBackDisabled = false
      if (this.currentPage === this.totalPage) {
        this.isUpDisabled = true
      }
      this.getTaskList()
    },
    // 上一页
    pageBack () {
      this.currentPage--
      if (this.currentPage === 1) {
        this.isBackDisabled = true
      }
      this.getTaskList()
    },
    // 获取工单列表
    async getTaskList () {
      const res = await taskSearch({
        pageIndex: this.currentPage,
        pageSize: 10,
        isRepair: false,
        status: this.status,
        taskCode: this.taskCode
      })
      this.tableData = res.currentPageRecords
      console.log(this.tableData)
      this.tableData.forEach((i, index) => {
        i.productTypeId = i.taskType.typeName
        i.taskStatus = i.taskStatusTypeEntity.statusName
        i.createType = i.createType === 0 ? '自动' : '手动'
        i.number = index + 1 + (this.currentPage - 1) * 10
      })
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
    },
    // 获取工单类型列表数据
    async getTaskTypeList () {
      const taskTypeList = await getTaskTypeList(this.alertValue)
      this.taskTypeList = taskTypeList
      this.dialogAlertVisible = false
    },
    // 预警线关闭
    cancel () {
      this.alertValue = 50
      this.dialogAlertVisible = false
    },
    //  获取工单详情
    async getTaskDetail () {
      if (!this.form.innerCode) {
        this.isError = '请输入设备编号'
        return
      }
      const res = await getChannelList(this.form.innerCode)
      this.detailData = res
      this.num = this.detailData.map((item) => item.maxCapacity)
      this.dialogDetailVisible = true
    },
    // 查看详情
    async checkDetail (i, r) {
      if (r.taskStatus === '待办') {
        this.taskTodoVisible = true
      } else {
        this.taskDetailVisible = true
      }
      const res = await getTaskInfo(r.taskId)
      this.taskDetail = res
    },
    // 查询工单提交
    onSubmit () {
      this.getTaskList()
      this.$refs.form.resetFields()
    },
    //  获取补货详情
    async getReplenishDetail () {
      this.dialogReplenisDetailVisible = true
      const res = await getTaskDetails(this.taskDetail.taskId)
      this.replenishDetail = res
    },
    // 重新创建工单
    recreate () {
      this.form.innerCode = this.taskDetail.innerCode
      this.form.productTypeId = this.taskDetail.productTypeId
      this.form.userName = this.taskDetail.userName
      this.getOperatorList()
      this.dialogFormVisible = true
    },
    // 获取运营人员列表
    async getOperatorList () {
      const res = await getOperatorList(this.form.innerCode)
      this.operatorList = res
    },
    // 取消订单
    cancelTask (done) {
      this.$confirm('取消工单后，将不能恢复，是否确认取消？')
        .then(async (res) => {
          await cancelTask(this.taskDetail.taskId)
          this.$message.success('取消订单成功')
        })
        .catch((res) => {})

      this.cancelDialogVisible = false
    },
    // 新建工单
    async createTask () {
      try {
        await this.$refs.form.validate()
        await createTask({
          assignorId: 10,
          createType: 1,
          desc: this.form.desc,
          details: this.detailData,
          innerCode: this.form.innerCode,
          userId: this.$store.state.user.userId,
          productType: this.form.productTypeId
        })
        this.$message.success('创建工单成功')
        this.closeFn()
      } catch (err) {
        if (err.response) {
          this.$message.error(err.response.data)
        }
      }
    },
    // 补货调整
    changeNum () {
      this.num.forEach((i, index) => {
        this.detailData[index].currentCapacity += i
        this.detailData[index].maxCapacity -= i
        this.dialogDetailVisible = false
      })
    },
    closeFn () {
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
    },
    cancelCreate () {
      this.closeFn()
    },
    formatDate (row, column, cellValue, index) {
      return cellValue.replace(/T/, ' ')
    }
  },
  computed: {},
  watch: {
    status (val) {
      this.getTaskList(val)
    }
  }
}
</script>

<style lang="scss" scoped>
#business {
  padding: 10px 0 0 20px;
  background-color: #f8fafd;
  .head {
    background-color: #fff;
    height: 60px;
    padding-top: 10px;
    .form {
      width: 800px;
      font-weight: normal;
    }
  }
}

.main {
  margin: 30px 0 0 0!important;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 15px 19px 17px;
  .add-btn {
    height: 36px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:20px ;
    i{
      margin-right:10px;
      font-size: 18px;
    }
  }
}
 ::v-deep.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom:0;
  }
  .table-foot {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    color: #999;
    .el-button-group>.el-button {
    height: 32px;
    font-size: 12px;
    width: 70px;
    line-height: 2px;
    text-align: center;
    background-color: #d5ddf8;
    border: none;
    border-radius: 0;
}
}
.fr {
  float: right;
  display: flex;
  justify-content: space-between;
  width: 300px;
}
.fl {
  float: left;
}
.prePage {
  padding-right: 20px;
}
.modify {
  height: 30px;
  width: 30px;
  display: flex;
  flex-direction: column-reverse;
  .el-button {
    height: 50%;
    width: 100%;
  }
}
::v-deep.el-table th.el-table__cell {
  background-color: rgb(243, 246, 251);
}
.row-bg {
  background-color: hsla(0, 0%, 92.5%, 0.39);
  height: 54px;
  line-height: 54px;
  margin-bottom: 25px;
  font-size: 26px;
  position: relative;
  i {
    padding-left: 20px;
  }
  span {
    font-size: 15px;
  }
  .absolute {
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 400px;
  }
  .el-descriptions__body .el-descriptions__table {
    margin-left: 20px;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    height: 100%;
    img {
      display: inline-block;
    }
  }
}
.channelbtn {
  margin-top: 20px;
}
</style>
